import React from 'react';
import { Link } from 'react-router';
import { Menu, Icon } from 'antd';
import './index.css';
import { siderBar, navbarList } from './config';

const { SubMenu } = Menu;

class Index extends React.Component {
    state = {
        currentMenu: 'user',
        showShadow: false
    }
    
    handleSort = () => {
        if (this.state.showShadow === false) {
            this.setState({
                showShadow: true
            })
        } else {
            this.setState({
                showShadow: false
            })
        }
    }
    // 按下鼠标
    mDown = (e) => {
        const target = e.target,
              targetIndex = target.getAttribute('data-index'),
              targetY = e.clientY,
              div = document.createElement('div');

        div.setAttribute('class', 'item sort hold');       
        target.setAttribute('class', 'item sort selected');
        target.parentNode.insertBefore(div, target.nextSibling);
        sessionStorage.setItem('targetIndex', targetIndex);
        sessionStorage.setItem('targetY', targetY)
    }
    // 移动鼠标
    mMove = (e) => {
        if (this.state.showShadow) {
            const targetY = sessionStorage.getItem('targetY');
            const moveY = e.clientY - targetY; 
            
            console.log(e.clientY)
            console.log('移动像素', targetY)
        }
        
    }
    // 放开鼠标
    mUp = (e) => {
        if (this.state.showShadow) {
            const targetIndex = sessionStorage.getItem('targetIndex'),
                  target = document.querySelector('[data-index="' + targetIndex + '"]');

            target.setAttribute('class', 'item sort');
            target.parentNode.removeChild(target.nextSibling);
            // target.remove
        }
    }
    componentDidMount() {
        // document.addEventListener('mouseup', this.mUp);
        document.addEventListener('mousemove', this.mMove);
    }
    componentWillUnmount() {
        // document.removeEventListener('mouseup');
        document.removeEventListener('mousemove');        
    }

    render() {
        const current = window.location.pathname.slice(1);
        return (
            <div className="page index">
                <header className="index-header">
                    <div className="nav-left">
                        <div className="nav-item">
                            <a>nav 1</a>
                        </div>
                        <div className="nav-item">
                            <a>nav 2</a>
                        </div>
                        <div className="nav-item">
                            <a>nav 3</a>
                        </div>
                    </div>
                    <div className="nav-right">
                        <a className="nav-menu-btn">小朱<span className="caret-down"></span></a>
                        <ul className="nav-menu">
                            <li>小朱</li>
                            <li>小朱</li>
                            <li>小朱</li>
                        </ul>
                    </div>
                </header>
                <div className="index-sider">
                    <Menu
                        theme="dark"
                        mode="inline"
                        defaultOpenKeys={['user', 'service']}
                        style={{ width: 240 }}
                    >
                        {
                            siderBar.map((item, i) => (
                                <SubMenu key={item.key} title={<span><Icon type={item.icon} /><span>{item.name}</span></span>}>
                                    {item.list.map((item2, index) => (
                                        <Menu.Item className={current === item2.key ? 'ant-menu-item-selected' : null} key={item2.key}><Link to={`/${item2.key}`}>{item2.name}</Link></Menu.Item>
                                    ))}
                                </SubMenu>
                            ))
                        }
                    </Menu>
                </div>
                <div className="index-content">
                        {this.props.children}
                </div>
                {/* 仿bilibili右侧功能栏 */}
                <div className="nav-wrap">
                    <div className={this.state.showShadow ? 'open-bg open' : 'open-bg'}>
                        <div className="tips-img"></div>
                    </div>
                    <div className="nav-list">
                        {
                            navbarList.map((item, index) => (
                                <div className="item sort"
                                    key={index}
                                    data-index={item.index}
                                    onMouseDown={this.state.showShadow ? this.mDown : null}
                                    onMouseUp={this.state.showShadow ? this.mUp : null}
                                    >{item.title}</div>                                
                            ))
                        }
                        <div className="item customize" onClick={this.handleSort}><i className="icon-sort"></i>排序</div>
                    </div>
                </div>
                <div className={this.state.showShadow ? 'nav-shadow' : 'nav-shadow hidden'}></div>
            </div>
        )
    }
}

export default Index;